<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <div class="box-ver-hor-between">
            <div class="primary-color">活动管理</div>
            <div>
              <a-button type="primary" @click="addForm">新增活动</a-button>
            </div>
          </div>
        </a-card>
      </a-col>
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="searchParam"
                       :labelCol="{ span: 10 }"
                       :wrapperCol="{ span: 14 }"
                       @on-search="search"
            />
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          />
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script setup>
import { tree } from "@/api/module/dept"
import { reactive } from 'vue'

const addForm = () => {
  this.$router.push({
    path: '/activity/activity-management/activity-management-add'
  })
  console.log('hi')
}

const fetch = async (param) => {
  const response = await tree(param)
  return {
    // data: response.data
    data: [{
      name: '营销活动AAAA',
      time: '2021-08-27 19:28:00至2021-08-30 19:28:00',
      status: '未开始',
      type: '营销活动',
      user: '张三，李四',
      createTime: '2021-08-26 02:28:00',
    }]
  };
};

const columns = [
  { dataIndex: "name", key: "name", title: "活动名称" },
  { dataIndex: "time", key: "time", title: "活动时间" },
  { dataIndex: "status", key: "status", title: "状态" },
  { dataIndex: "type", key: "type", title: "活动类型" },
  { dataIndex: "user", key: "user", title: "负责人" },
  { dataIndex: "createTime", key: "createTime", title: "创建时间" },
]

const operate = [
  { label: "详情" },
]

const searchParam = reactive([
  {
    key: "post", type: "select", label: "活动类型",
    placeholder: '全部',
    options: [
      { text: "全部", value: 1 },
      { text: "渠道活动", value: 2 },
      { text: "营销活动", value: 3 },
    ]
  },
  { key: "name", type: "input", label: "活动名称", placeholder: '请输入' },
  { dataIndex:"createTime", key: "createTime", type: "rangeTime", label: "创建时间"},
  {
    key: "post", type: "select", label: "状态",
    placeholder: '全部',
    options: [
      { text: "全部", value: 1 },
      { text: "未开始", value: 2 },
      { text: "进行中", value: 3 },
      { text: "已结束", value: 4 }
    ]
  },
  { key: "user", type: "input", label: "负责人", placeholder: '请输入' },

])

const state = reactive({
  selectedRowKeys: [],
  param: {},
  visibleSave: false,
  visibleEdit: false,
  visibleInfo: false,
  recordEdit: {},
  recordInfo: {},
})
</script>

<style scoped>

</style>
